<template>
  <div class="homes" ref="refHome">
    <!-- <div class="ptop-cate" :class="{'no-loaded-cat':topCates.length==0}">
      <pswiper wrapclass="nav-cates" :betn="20" ref="refcateSwp" :slides="12" prevclass="cate-page-prev"
        nextclass="cate-page-next" id="cateSwp">
        <li :class="['swiper-slide', cateId == '' ? 'active-color' : '']"><a href="/" @click.prevent="toBasePage('')">全部</a>
        </li>
        <li :class="['swiper-slide', cateId == '22' && !curGmStyle ? 'active-color' : '']"><a href="/games?t=1">游戏</a></li>
        <li :class="['swiper-slide', cateId == '10' ? 'active-color' : '']"><a href="/games?t=2">截图</a></li>
        <li :class="['swiper-slide', cateId == '1' ? 'active-color' : '']"><a href="/?t=1"
            @click.prevent="toBasePage('1')">作品</a></li>
        <li :class="['swiper-slide', cateId == '9' ? 'active-color' : '']"><a href="/?t=9"
            @click.prevent="toBasePage('9')">文章</a></li>
        <li :class="['swiper-slide', cateId == '22' && curGmStyle == c.value ? 'active-color' : '']" v-for="(c, indx) in topCates"
          v-if="c.title != '全部'"><a :href="'/games?t=1&style=' + c.value" >{{ c.title }}</a></li>
      </pswiper>
    </div> -->

    <div class="home-tabs" v-if="!cateId">
      <a v-for="(tab,idx) in tabs" :class="{'active':game.params.style==tab.name}" @click="chooseTab(tab)">{{tab.name}}</a>
    </div>
    <template v-if="cateId == ''">
      <div class="zwf-el">
      </div>
      <ul class="hot-row" v-if="topList.length > 0">
        <template v-for="(item, idx) in topList">
          <li v-if="item.topType == 1" :class="{'no-data':!item.id}">
            <template v-if="item.id">
              <a class="desc-tit">今日热门作品</a>
              <a class="img-box" target="_blank" :href="'/work/' + item.id">
                <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError">
                <div class="left-icos">
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                    <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/new.png" alt="">
                </el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                  <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                  <img loading="lazy" slot="reference" src="../../assets/pro/common/hot.png" alt="">
                  </el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
                    <i class="sm-tip" slot-content>内容含视频</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/video.png" alt="">
                  </el-popover>
                </div>
              </a>
            </template>
          </li>
          <li v-else-if="item.topType == 2" :class="{'no-data':!item.id}">
            <template  v-if="item.id">
              <a class="desc-tit">今日热门游戏</a>
            <a class="img-box" target="_blank" :href="'/game/' + item.id">
              <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError">
            </a>
            </template>
          </li>
          <li v-else  :class="{'no-data':!item.id}">
            <template  v-if="item.id">
              <a class="desc-tit" target="_blank" :href="item.url">{{ item.title }}</a>
              <a class="img-box" target="_blank" :href="item.url">
                <img loading="lazy" :src="item.image" alt="">
              </a>
              <span class="is-adv">广告</span>
            </template>
          </li>
        </template>
      </ul>
      <div class="center-b-area" v-if="false">
        <div class="b-a-left" v-if="works.length > 0">
          <div class="bal-tit flex-bal">
            <el-popover popper-class="xkj-sou-pop"
                        placement="bottom"
                        trigger="hover">
                        <div class="xj-search-desc">
                        <div class="sub-desc">推荐标准：</div>
                        <div class="sub-d">
                            1. 明确的设计目标；<br/>
                            2. 非搬运/抄袭；<br/>
                            3. 设计思路创新；<br/>
                            4. 设计完成度高
                        </div>
                        </div>
                <router-link slot="reference"  to="/works" class="rt-link-clr has-arrow">推荐作品</router-link>
            </el-popover>
            <a class="no-bg random-change" @click="randchangeWork">换一换</a>
          </div>
          <div class="ba-datas">
            <a class="bdl-data-item" :class="{'no-data':!item.id}" v-for="(item, idx) in works" :key="idx" :href="item.id?'/work/' + item.id:'#'" target="_blank">
              <template v-if="item.id">
                <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy">
                <div class="basic-u-info">
                  <a class="user" :href="'/user/' + item.member.id" target="_blank"
                    @click.prevent="toUserCenter(item.member.id)">
                    <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 26, name: item.member.userName }" alt="">
                    <span class="name"> {{ item.member.userName }}<img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList"
                        :src="tag.image" alt=""></span>
                  </a>
                  <div class="znum" v-if="item.praise > 100">
                    {{ item.praiseStr }}
                  </div>
                  <div class="snum" v-else>
                    {{ item.seeStr }}
                  </div>
                </div>
                <div class="left-icos">
                  <!-- <img loading="lazy" src="../../assets/pro/common/new.png" alt="" v-if="item.new"> -->
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                    <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/new.png" alt="">
                  </el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                  <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                  <img loading="lazy" slot="reference" src="../../assets/pro/common/hot.png" alt="">
                  </el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-if='item.videoUrl'>
                    <i class="sm-tip" slot-content>内容含视频</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/video.png" alt="">
                  </el-popover>
                </div>
                <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
                  <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title"
                    v-if="t.image" :src="t.image" alt="">
                </div>
                <div class="con-mask"></div>
              </template>
            </a>
          </div>
        </div>
        <!-- <div class="b-a-right" v-if="hotWordsList.length > 0">
          <div class="bal-tit flex-bal">
            <a class="no-bg">今日热搜</a><a class="no-bg random-change" @click="randchangeWords" v-if="allWords.length>11">换一换</a>
          </div>
          <ul class="ho-dds">
            <li v-for="(item, index) in hotWordsList" v-if="!item.isadv" :class="{'no-data':!item.name}">
              <a :href="'/searchs?k=' + item.title + '&t='" @click.prevent="toSearchByHot(item.name)" v-if="item.name"><span
                  :class="item.num<4? 'rd' : ''">{{ item.num }}</span>{{ item.name }}</a>
            </li>
            <li v-else>
              <a :href="item.url" target="_blank"><span class="m-y"></span>{{ item.title }}</a>
            </li>
          </ul>
          <div class="bal-tit flex-bal mt41">
            <a class="no-bg">热门作者</a><a class="no-bg random-change" @click="randchange">换一换</a>
          </div>
          <ul class="hot-gx-data">
            <li v-for="(item, index) in members" :key="index" class="item" :class="{'no-data':!item.id}">
              <template v-if="item.id">
                <div class="u-box">
                <a class="img-box" target="_blank" :href="'/user/' + item.id" @click.prevent="toUserCenter(item.id)">
                  <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy"  @error="loadError"/>
                </a>
                <div class="basic-box">
                  <a class="tit" target="_blank" :href="'/user/' + item.id" @click.prevent="toUserCenter(item.id)">
                    {{ item.userName }}
                    <img loading="lazy" v-for="tag in item.tagsList" :src="tag.image" alt="">
                  </a>
                  <div class="num-b">
                    <span>粉丝<b>{{ item.fansStr }}</b></span>
                    <span>人气<b>{{ item.seeStr }}</b></span>
                  </div>
                </div>
              </div>
              <a class="at-btn" :class="{ 'active': item.isSubscribe > 0 }" @click="handleFollow(item)"
                v-if="userId">{{ item.isSubscribe > 0 ? '已关注' : '关注' }}</a>
              </template>
            </li>
          </ul>
        </div> -->
      </div>

      <!-- <div class="zj-ba-data zj-add" :class="{'no-loaded-rcgms':!isLoadedrecentlyGameList}" v-if="recentlyGameList.length > 0">
        <div class="bal-tit">
          <a class="no-bg">最近添加的游戏</a>
        </div>
        <pswiper wrapclass="data-wrap" :betn="20" ref="refgmSwp" :slides="6.5" prevclass="gm-page-prev-msize"
          :data="recentlyGameList" nextclass="gm-page-next-msize" id="gmSwp">
          <a class="swiper-slide bdl-data-item" :class="{'no-data':!item.id}" v-for="(item, idx) in recentlyGameList" :key="idx"
            :href="item.id?'/game/' + item.id:'#'" target="_blank">
            <template v-if="item.id">
              <img loading="lazy"  :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
              <div class="left-icos">
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                    <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/hot.png" alt="">
                </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
                  <i class="sm-tip" slot-content>内容含视频</i>
                  <img loading="lazy" slot="reference" src="../../assets/pro/common/video.png" alt="">
                </el-popover>
              </div>
              <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
                <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title"
                  v-if="t.image" :src="t.image" alt="">
              </div>
              <div class="basic-info hid-el">
                <div class="title">{{ item.title }}</div>
                <div class="bot-desc">
                  <span class="pnum">{{ item.totalImageCount }}</span>
                  <span class="uname">
                    <span class="name-text">
                      {{ item.member.userName }}
                    </span>
                    <img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList"
                      :src="tag.image" alt=""></span>
                </div>
              </div>
              <div class="con-mask hid-el"></div>
            </template>
          </a>
        </pswiper>
      </div> -->

      <!-- <div class="zj-ba-data yx-cate">
        <div class="bal-tit">
          <a class="no-bg">游戏类型</a>
        </div>
        <pswiper :slides="7" :betn="20" wrapclass="yx-cates" ref="refgmCateSwp" prevclass="gmcate-page-prev-msize"
          nextclass="gmcate-page-next-msize" id="gmCateSwp">
          <li v-for="(item, idx) in gTypes" :key="idx" class="swiper-slide yx-c-item"
            :style="{ backgroundColor: item.bgColor }" :class="{'no-data':!item.value}" v-if="item.value != ''">
            <template v-if="item.value">
              <a :href="'/games?cat=' + item.value" @click.prevent="toGamePageByType(item)">
              <img loading="lazy" src="" alt="">
              <span class="txt">{{ item.title }}</span>
            </a>
            </template>
          </li>
        </pswiper>
      </div> -->
      <div class="ald-ba-data all-games">
        <!-- <div class="bal-tit">
          <el-popover popper-class="xkj-sou-pop"
                      placement="bottom"
                      trigger="hover">
                      <div class="xj-search-desc">
                        <div class="sub-desc">推荐标准：</div>
                        <div class="sub-d">
                          1. 网站未入库/重大更新；<br/>
                          2. 非搬运/抄袭；<br/>
                          3. 创意表现突出；<br/>
                          4. 制作品质优良
                        </div>
                      </div>
              <a slot="reference" class="no-bg">今日热门游戏</a>
            </el-popover>
        </div> -->
        <div class="data-wrap big">
          <a class="bdl-data-item" :class="{'no-data':!item.id}" v-for="(item, idx) in game.list" :key="idx" :href="item.id?'/game/' + item.id:'#'"
          target="_blank">
            <template v-if="item.id">
              <div class="mimg-box">
                <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                <span class="pnum">{{ item.image_count }}</span>
                <div class="cate-dsc">{{item.device}}{{item.categoryName}}{{item.style?' · '+item.style:''}}{{item.era?' · '+item.era:''}}</div>
              </div>
              <div class="basic-info">
                <div class="title">{{ item.title }}</div>
                <div class="bot-desc">
                  <span class="uname">
                    <img loading="lazy" class="u-img" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }"/>
                    <a class="name-text">{{ item.member.userName }}</a>
                    <img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList" :src="tag.image" alt="">
                  </span>
                  
                  <div class="znum">
                    {{ item.praiseStr }}
                  </div>
                  <div class="jnum">
                    +{{ item.views }}
                  </div>
                </div>
              </div>
              <div class="left-icos">
                <!-- <img loading="lazy" src="../../assets/pro/common/hot.png" alt="" v-if="item.hot" /> -->
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                    <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/new.png" alt="">
                </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                    <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/hot.png" alt="" >
                </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
                  <i class="sm-tip" slot-content>内容含视频</i>
                  <img loading="lazy" slot="reference" src="../../assets/pro/common/video.png" alt="" >
                </el-popover>
              </div>
              <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
                <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image"
                  :src="t.image" alt="" />
              </div>
              <!-- <div class="con-mask hid-el"></div> -->
            </template>
          </a>
        </div>
        <div class="no-more-text" style="margin-bottom:20px;" v-if="!game.hasMore&&!game.isloading&&game.list.length>0">没有更多了</div>
        <div class="pro-bot-loading" v-if="game.isloading">
          <i class="el-icon-loading"></i>
        </div>
      </div>
    </template>
    <GameList :filtercates="filterAllCate" :filterparams="filterparams" :curgmstyle="curGmStyle"
      @changepage="onChangePage" v-else-if="cateId == '22'" />
    <ImageList :filtercates="filterAllCate" :filterparams="filterparams" @changepage="onChangePage"
      v-else-if="cateId == '10'" />
    <VideoList v-else-if="cateId == '50'" />
    <WorkList v-else-if="cateId == '1'" />
    <ArticleList v-else-if="cateId == '9'" />

    <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body :visible.sync="showInfo"
      direction="btt">
      <!-- 游戏详情 -->
      <gameInfo @close="onInfoClose" v-if="pageType == 'game'" :id="currentId" />
      <!-- 作品详情 -->
      <workInfo @close="onInfoClose" v-else-if="pageType == 'work'" :id="currentId" @prev="onPrev" @next="onNext" />
      <!-- 文章详情 -->
      <articleInfo @close="onInfoClose" v-else-if="pageType == 'article'" :id="currentId" />
    </el-drawer>

    <PicToPicSearch v-if="showPicToPic" @cancel="showPicToPic = false" @onsearch="onPicSearch" />

    <PlayVideo v-if="showPlay" :data="currentItem" @close="showPlay = false" />

    <UnLoginMask />

    
    <div class="loading-mask" v-if="game.isloading"></div>
  </div>
</template>

<script>
import UnLoginMask from '@/components/UnLoginMask'
// import PlayVideo from '@/components/playvideo'
// import GameList from './games.vue'
// import ImageList from './imgs.vue'
// import VideoList from './videos.vue'
import WorkList from './works.vue'
import ArticleList from './articles.vue'
// import gameInfo from '@/components/gameInfo'
// import articleInfo from '@/components/articleinfo'
// import workInfo from '@/components/workinfo'
// import pswiper from '@/components/pswiper'

// import PicToPicSearch from '@/components/PicToPicSearch'
import api from '@/api/api'
import { parseTime } from '../../../static/utils/formatdate.js'


export default {
  name: 'homes',
  components: { 
    // pswiper, 
    // PicToPicSearch, 
    // gameInfo, 
    // articleInfo, 
    // workInfo, 
    // GameList, 
    // ImageList, 
    // VideoList, 
    WorkList, 
    ArticleList, 
    // PlayVideo, 
    UnLoginMask 
  },
  data() {
    return {
      tabs:[{name:'发现'},{name:'国风'},{name:'欧美'},{name:'二次元'},{name:'日韩'},{name:'Q版卡通'},{name:'科幻'},{name:'军事'}],
      wordIdx:1,
      allWords:[],
      memberTotalPage:0,
      workTotalPage: 0,
      workPageNum: 1,
      currentIdx: -1,
      topList: [{},{},{},{},{}],
      isInitSwp: false,
      userId: '',
      filterAllCate: [],
      filterparams: {},
      curGmStyle: '',
      curFullPath: '',
      currentId: '',
      pageType: '',
      topCates: [],
      scrollLoaded: false,
      currentItem: {},
      showPlay: false,
      recentlyGameList: [{}, {}, {}, {}, {}, {}, {}],
      isLoadedrecentlyGameList:false,
      shortVideos: [{}, {}, {}, {}],
      cateId: '',
      gameAll: [],
      showInfo: false,
      game: {
        postnum:0,
        isloading: true,
        total: 0,
        list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
        hasMore: true,
        totalPage: 0,
        randomPage:-1,
        params: {
          pageNum: 1,
          pageSize: 30,
          orderByColumn: 'createTime',
          rank: '首页推荐',
          sort:'day_rank',
          categoryId: 22,
          ishome:true,
          isAsc: 'desc',
          style:'发现'
        }
      },
      games: [],
      gTypes: [{},{},{},{},{},{},{},{}],
      slickSettings: {
        slidesToShow: 7,
        slidesToScroll: 1,
        infinite: false
      },
      showPicToPic: false,
      keySelectIndex: -1,
      showSearchkeys: false,
      globalSearchkeys: [],
      globalSearchKeyTitle: '全站内容',
      globalSearchKeyType: '',
      globalKeyword: '',
      hotGamePageNum: 1,
      isFocus: false,
      otherJoblist: [],
      showDetails: false,
      jobDetails: {},
      inspirations: [],
      hasMore: true,
      isloadedArticle: false,
      gImg: require('../../assets/iconq10.png'),
      defaultAvatar: require('../../assets/pro/default_sys_img.svg'),
      /* 广告 */
      adList: [],
      /* 作品 */
      worksArticleParam: {
        pageNum: 1,
        // pageSize: 12,
        pageSize: 12,
        categoryId: 1,
        isAsc: 'desc',
        orderByColumn: 'createTime',
        rank: '首页推荐',
      },
      works: [{},{},{},{},{},{},{},{},{}],
      worksArticleTotal: 0,
      worksArticleCurrentPage: 1,
      worksArticleTabIndex: 0,
      /* 灵感 */
      inspirationArticleParam: {
        pageNum: 1,
        pageSize: 3,
        categoryId: 22,
        rank: '首页推荐',
      },
      inspirationArticle: [],
      /* 文章 */
      articleParam: {
        pageNum: 1,
        pageSize: 3,
        categoryId: 9,
      },
      article: [],
      articleTotal: 0,
      articleCurrentPage: 1,
      articleTabIndex: 0,
      /* 设计师 */
      membersParam: {
        pageNum: 1,
        pageSize: 4,
        orderByColumn:'see',
        isAsc:'desc'
      },
      members: [{},{},{},{}],
      /* 合作伙伴 */
      linksParam: {
        pageNum: 1,
        pageSize: 100,
      },
      links: [],
      jobs: [],
      type: '',
      hotGames: [],
      navs: [],
      fitCollections: [],
      advObj: {},
      searchData: [],
      browserData: [],
      hotGameTotalPage: 0,
      getCategoryFilterList: [],
      hotWordsList: [{},{},{},{},{},{},{},{},{},{},{}],
      countId: "首页推荐"
    }
  },
  watch: {
    $route(newd) {
      if (newd.query.st) {
        this.cateId = 22;
        this.curGmStyle = newd.query.st;
      }
      this.init();
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.docScroll);
  },
  async mounted() {
    $('body,html').animate({ scrollTop: 0 }, 300);
    this.init();
  },
  methods: {
    chooseTab(tab){
      if(tab=='作品'||tab=='文章'){

      }else{
        this.game.params.style=tab.name;
        this.game.params.pageNum=1;
        this.game.postnum=0;
        this.game.hasMore=true;
        this.game.params.last='';
        this.game.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
        this.queryList();
      }
    },
    randchangeWords(){
      if(this.hotWordsList.length<11)
      {
        this.wordIdx=1;
      }else{
        this.wordIdx++;
        if(this.wordIdx==4){
          this.wordIdx=1;
        }
      }
      this.hotWordsList = this.paginateArray(this.allWords,11,this.wordIdx);
    },
    loadError(e){
        e.target.removeAttribute('srcset');
    },
    async init(){
      let that = this;
      this.userId = localStorage.getItem('userId') || '';
      if (this.$route.query.st) {
        this.curGmStyle = this.$route.query.st;
      }

      let _cateVal = this.$route.query.t;
      if (['22', '10', '1', '9'].includes(_cateVal)) {
        this.cateId = _cateVal;
      }else{
        window.addEventListener('scroll', this.docScroll)
      }

      this.getList();
      
      // let res = await api.getCategoryFilter();
      
      // this.getCategoryFilterList = res.data.tags;

      // let sres = await api.articlelist({
      //   pageNum: 1,
      //   pageSize: 1,
      //   categoryId: 1,
      //   rank: '首页推荐'
      // })
      // if (sres.total > 9) {
      //   let totalPage = sres.total % 9 == 0 ? sres.total / 9 : parseInt(sres.total / 9) + 1;
      //   this.workTotalPage = totalPage;
      //   let page = Math.floor((Math.random() * totalPage) + 1);
      //   if (page == totalPage) page = 1;
      //   this.workPageNum = page;
      // }

      // this.queryWorks();

      // let topdata = [];
      // let start=new Date();
      // let starttime=moment(new Date(start).setDate(start.getDate()-1)).format('YYYY-MM-DD');
      // let end=new Date(start.setDate(start.getDate()));
      // let endtime=moment(end).format('YYYY-MM-DD');

      // res = await api.getHomeRank({sort:'day_rank'});
      // if(res.data.works.list.length>0){
      //   res.data.works.list[0].topType = 1;
      //   topdata = res.data.works.list;
      // }
      // res = await api.getGameRank({sort:'day_rank'});
      // if(res.data.games.list.length>0){
      //   res.data.games.list[0].topType = 2;
      //   topdata = [...topdata, ...res.data.games.list];
      // }

      // let domainUrl=this.$imgdomainurl;
      // topdata.map(item=>{
      //   let _vtime=null;
      //   if(item.updateTime){
      //     _vtime=item.updateTime;
      //   }else if(item.createTime){
      //     _vtime=item.createTime;
      //   }else if(item.create_time){
      //     _vtime=item.create_time.replace('T',' ');
      //   }
      //   _vtime=Math.abs(new Date(_vtime).getTime());
      //   let srcsets=[];
      //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x432.webp 1x');
      //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x432.webp 2x');
      //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x432.webp 3x');
      //   item.srcsets=srcsets.join(',')
      //   item.lazy={
      //     src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
      //     error: require('@/assets/loading_error.png'),
      //     loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      //   }
      // })
      
      let res = await api.getHomeNavs();
      res.data.map(item => {
        item.topType = 3;
      })
      // topdata = [...topdata, ...res.data];
      
      this.topList = res.data;

      //最近添加的游戏
      // res = await api.articlelist({
      //   pageNum: 1,
      //   pageSize: 14,
      //   orderByColumn: 'createTime',
      //   categoryId: 22,
      //   isAsc: 'desc'
      // })

      // res.data.map(item=>{
      //   let _vtime=null;
      //   if(item.updateTime){
      //       _vtime=item.updateTime;
      //   }else if(item.createTime){
      //       _vtime=item.createTime;
      //   }else if(item.create_time){
      //       _vtime=item.create_time.replace('T',' ');
      //   }
      //   _vtime=Math.abs(new Date(_vtime).getTime());
      //   item.lazy = {
      //       src:that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
      //       error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
      //       loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      //   }
      //   let srcsets=[];
      //   srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x432.webp 1x');
      //   srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@2x432.webp 2x');
      //   srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@3x432.webp 3x');
      //   item.srcsets=srcsets.join(',')
      // })
      // this.recentlyGameList = res.data;
      // this.isLoadedrecentlyGameList=true;

      // setTimeout(()=>{
      //   if(that.$refs['refgmSwp'])
      //     that.$refs['refgmSwp'].init();
      // },100)

      // this.gethotWords();//今日热搜

      // res = await api.membersRank({
      //   pageNum: 1,
      //   pageSize: 4,
      //   orderByColumn:'see',
      //   isAsc:'desc'
      // })
      // if (res.total > 9) {
      //   let totalPage = res.total % 4 == 0 ? res.total / 4 : parseInt(res.total / 4) + 1;
      //   this.memberTotalPage = totalPage;
      //   let page = Math.floor((Math.random() * totalPage) + 1);
      //   if (page == totalPage) page = 1;
      //   this.membersParam.pageNum = page;
      // }
      // this.queryMembers();//热门作者

      // let params=Object.assign({},this.game.params);
      // params.pageSize=1;
      // res = await api.articlelist(params);
      // if (res.total >this.game.params.pageSize) {
      //   let totalPage = res.total % this.game.params.pageSize == 0 ? res.total / this.game.params.pageSize : parseInt(res.total / this.game.params.pageSize) + 1;
        
      //   let page = Math.floor((Math.random() * totalPage) + 1);
      //   if (page == totalPage) page = 1;
      //   this.game.randomPage=page;
      //   this.game.params.pageNum=page;
      // }

      if(!this.cateId){
        this.queryList(); //全部游戏
      }else{
        this.game.isloading=false;
      }
    },
    async queryWorks() {
      //原创设计作品
      let res = await api.articlelist({
        pageNum: this.workPageNum,
        pageSize: 12,
        categoryId: 1,
        isAsc: 'desc',
        orderByColumn: 'createTime',
        rank: '首页推荐'
      })
      let that=this;
      res.data.map(item=>{
        let _vtime=null;
        if(item.updateTime){
            _vtime=item.updateTime;
        }else if(item.createTime){
            _vtime=item.createTime;
        }else if(item.create_time){
            _vtime=item.create_time.replace('T',' ');
        }
        _vtime=Math.abs(new Date(_vtime).getTime());
        item.lazy = {
            src:that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
        }
        let srcsets=[];
        srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x432.webp 1x');
        srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@2x432.webp 2x');
        srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@3x432.webp 3x');
        item.srcsets=srcsets.join(',')
      })
      let totalPage = res.total % 12 == 0 ? res.total / 12 : parseInt(res.total / 12) + 1;
      this.workTotalPage = totalPage;
      // let page = Math.floor((Math.random() * totalPage) + 1);
      this.works = res.data;
    },
    async queryMembers() {
      this.membersParam.userId = this.userId;
      let res = await api.membersRank(this.membersParam);
      let that=this;
      res.data.map(item=>{
          let _vtime=null;
          if(item.updateTime){
              _vtime=item.updateTime;
          }else if(item.createTime){
              _vtime=item.createTime;
          }else if(item.create_time){
              _vtime=item.create_time.replace('T',' ');
          }
          _vtime=Math.abs(new Date(_vtime).getTime());
          item.lazy = {
              src:that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x60.webp',
              error: require('@/assets/pro/default_sys_img.svg'),
              loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
          }
          let srcsets=[];
          srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x60.webp 1x');
          srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@2x60.webp 2x');
          srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@3x60.webp 3x');
          item.srcsets=srcsets.join(',')
      })
      this.members = res.data;
    },
    async randchangeWork() {
      if (this.workPageNum == this.workTotalPage) {
        this.workPageNum = 1;
      }
      // else 
      this.workPageNum++;
      this.queryWorks();
    },
    randchange() {
      if (this.membersParam.pageNum == this.memberTotalPage - 1) {
        this.membersParam.pageNum = 1;
      }
      this.membersParam.pageNum++
      this.queryMembers()
    },
    onPrev() {
      if (this.currentIdx == 0) {
        this.$amessage.warn('没有更多了')
        return;
      }
      this.currentIdx--;
      this.currentId = this.works[this.currentIdx].id;
    },
    onNext() {
      if (this.currentIdx == this.works.length - 1) {
        this.$amessage.warn('没有更多了')
        return;
      }
      this.currentIdx++;
      this.currentId = this.works[this.currentIdx].id;
    },
    docScroll() {
      let that = this;
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;

      if (that.scrollLoaded == false) return
      if (jHeight <= 200 && that.game.hasMore && that.cateId == '') {
        if (!localStorage.getItem('token')) {
          that.$parent.noLoginIsTak = false;
          that.$parent.showLoginView = true;
          that.game.isloading = false;
          window.removeEventListener('scroll', that.docScroll);
          return;
        }
        that.scrollLoaded = false;
        that.handleLoadingMoreGames();
      }
    },
    async handleFollow(item) {
      if (item.isSubscribe > 0) {
        let res = await api.cancelFollowTo(item.id);
        if (res.code == 0) {
          item.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(item.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu',[])
          item.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
    onChangePage(_params, _type, _allCate) {
      this.filterparams = _params;
      this.filterAllCate = _allCate;
      this.cateId = _type;
    },
    toGamePageByType(item) {
      this.$router.push({ path: '/games?cat=' + item.value })
    },
    chooseGameStyle(f) {
      this.cateId = '22';
      this.curGmStyle = f.value;
      this.$router.replace({ path: '/?t=22&st=' + f.value })
    },
    toUserCenter(_id) {
      this.$router.push({ path: '/user/' + _id })
    },
    toSearchByHot(_title) {
      this.$router.push({ path: '/searchs?k=' + _title + '&t=' })
    },
    toBasePage(_cateId) {
      $('body,html').animate({ scrollTop: 0 }, 300);
      this.curGmStyle = '';
      this.cateId = _cateId;
      this.$router.replace({ path: '/' + (_cateId?'?t='+_cateId:'') });
    },
    toGamesPage(item) {
      this.$router.push({ path: '/games?style=' + item.value })
    },
    async getList() {
      let result = {};
      let gtypes = localStorage.getItem('G-TYPES');
      let _types = [];
      if (!gtypes) {
        result = await api.getCategoryForInspiration();
        _types = result.data[0].result;
        let idx = 0;
        let bgColors = ['rgba(88,61,68,0.4)', 'rgba(64,88,85,0.4)', 'rgba(69,92,104,0.4)', 'rgba(65,58,89,0.4)', 'rgba(75,64,50,0.4)']
        _types.map(item => {
          if (idx == 5) {
            idx = 0;
          }
          item.bgColor = bgColors[idx];
          idx++;
        })
        localStorage.setItem('G-TYPES', encodeURIComponent(JSON.stringify(_types)))
        this.gTypes = _types;

        localStorage.setItem('CATE-ALL-TYPES', encodeURIComponent(JSON.stringify(result.data)))

        let newObj = {};
        newObj.categorys = result.data.filter(r => {
          return r.key == 'categoryThirdId';
        })[0].result;
        newObj.themes = result.data.filter(r => {
          return r.key == 'theme';
        })[0].result;
        newObj.funs = result.data.filter(r => {
          return r.key == 'gameFunc';
        })[0].result;
        newObj.materials = result.data.filter(r => {
          return r.key == 'game_material';
        })[0].result;
        newObj.devices = result.data.filter(r => {
          return r.key == 'categorySecondId';
        })[0].result;
        newObj.orientations = result.data.filter(r => {
          return r.key == 'orientation';
        })[0].result;
        newObj.eras = result.data.filter(r => {
          return r.key == 'era';
        })[0].result;
        newObj.styles = result.data.filter(r => {
          return r.key == 'style';
        })[0].result;

        localStorage.setItem('OBJ-CATE-ALL-TYPES', encodeURIComponent(JSON.stringify(newObj)))
      }
      else {
        this.gTypes = JSON.parse(decodeURIComponent(gtypes));
      }

      let obj = JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));
      this.topCates = obj.styles;

      // let that=this;
      // setTimeout(()=>{
      //   if(that.$refs['refcateSwp'])
      //     that.$refs['refcateSwp'].init();
      //   // if(that.$refs['refgmCateSwp'])
      //   //   that.$refs['refgmCateSwp'].init()
      // },100)
    },
    paginateArray(array, pageSize, page) {
        // 计算分页后的子数组开始和结束索引
        const start = (page - 1) * pageSize;
        const end = start + pageSize;
    
        // 返回分页后的子数组
        return array.slice(start, end);
    },
    //今日热搜
    async gethotWords() {
      let res = await api.getHomeHots({pageSize:32});

      let _datas = res.data.searchs.list;

      res = await api.getHomeAdNew();
      if (res.data.length > 0) {
        res.data[0].isadv = true;
        _datas.splice(3, 0, res.data[0]);
      }

      _datas.map((item,idx)=>{
        item.num=idx+1;
      })
      this.allWords=_datas;
      this.hotWordsList = this.paginateArray(_datas,11,this.wordIdx);
    },
    onInfoClose() {
      window.history.pushState({}, 0, this.curFullPath);
      document.body.style.overflow = 'inherit';
      this.showInfo = false;
    },
    handleShowInfo(_item, _pageType) {
      if(!_item.id)return;
      this.curFullPath = this.$route.fullPath;
      this.pageType = _pageType;
      this.currentId = _item.id;
      document.body.style.overflow = 'hidden';
      window.history.pushState({}, 0, '/' + _pageType + '/' + _item.id);
      this.showInfo = true;
    },
    handleLoadingMoreGames() {
      if(this.game.params.pageNum!=this.game.randomPage){
        this.game.params.pageNum++;
      }
      else{
        this.game.params.pageNum=1;
      }
      this.queryList()
    },
    async queryList() {
      var that = this;
      // const loading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      that.game.isloading = true;
      // let result = await api.articlelist(that.game.params);
      let params=Object.assign({},that.game.params);
      if(params.style=='发现')params.style='';
      
      let result=await api.getRanks('games',params);
      result.data=result.data.games.list;
      if(this.game.postnum==0){
        this.game.list=[];
      }
      this.game.postnum++;
      let domainUrl = that.$imgdomainurl;
      result.data.map(item => {
        item.member=item.user;
        item.praiseStr=item.praise_count;
        item.member.userName=item.user.user_name;
        let _vtime = null;
        if (item.updateTime) {
          _vtime = item.updateTime;
        } else if (item.createTime) {
          _vtime = item.createTime;
        } else if (item.create_time) {
          _vtime = item.create_time.replace('T', ' ');
        }
        _vtime = Math.abs(new Date(_vtime).getTime());
        let srcsets = [];
        srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@1x800.webp 1x');
        srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@2x800.webp 2x');
        srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@3x800.webp 3x');
        item.srcsets = srcsets.join(',');

        let items=that.gTypes.filter(r=>{return r.value==item.category_id});
        item.categoryName=items.length>0?(item.device?' · '+items[0].title:items[0].title):'';

        item.lazy = {
          src: domainUrl + 'article-' + item.id + '-' + _vtime + '@1x800.webp',
          error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
          loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
        }
      })
      
      if(result.data.length>0)
          that.game.params.last=result.data[result.data.length-1].id;
      that.game.list = [...that.game.list, ...result.data];

      that.game.total = result.total;

      let totalPage = result.total % that.game.params.pageSize == 0 ? result.total / that.game.params.pageSize : parseInt(result.total / that.game.params.pageSize) + 1;
      this.game.totalPage = totalPage;
      // if (result.data && (result.data.length < that.game.params.pageSize || that.game.params.pageNum >= totalPage)) {
      if(this.game.params.pageNum==4||result.data.length<30){
        that.game.hasMore = false;
      } else {
        that.game.hasMore = true;
      }
      that.game.isloading = false;
      // loading.close();
      this.scrollLoaded = true;
    },
    onPicSearch(data) {
    }
  }
}
</script>

<style lang="less">
.homes{
  .home-tabs{
    display: flex;
    align-items: center;
    justify-content: center;
    color:#52565A;
    grid-gap:17px;
    font-size:16px;
    border-radius:23px;
    line-height:36px;
    margin-bottom:20px;
    a{
      padding:0px 23px;
      border-radius:23px;
      transition-property:background;
    }
    .active{
      color:#fff;
      background:#191C1E;
    }
  }
// .dx-video-datas {
//   display: flex;
//   align-items: center;

//   .dx-vd-item {
//     width: 393px !important;
//     height: 221px;
//     min-width: 393px;
//     border-radius: 16px;
//     overflow: hidden;
//     margin-right: 20px;
//     position: relative;
//     background: #1D1D1F;

//     a {
//       img {
//         width: 100%;
//         height: 100%;
//         object-fit: cover;
//       }
//     }

//     .play-icon {
//       background: url('../../assets/pro/home_v_play.svg') no-repeat;
//       background-position: center center;
//       display: inline-block;
//       width: 80px;
//       height: 80px;
//       position: absolute;
//       left: calc((100% - 80px) / 2);
//       top: calc((100% - 80px) / 2);
//     }
//   }
// }
}

.gm-cate-page-prev {
  background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
  background-size: cover;
  width: 50px;
  height: 50px;
  transform: rotate(180deg);
  z-index: 1;
  left: 15px !important;
  top: 40px;
  border-radius: 8px;

  &:after {
    display: none;
  }

  &:hover {
    background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
    // opacity:.6 !important;
    background-size: cover;
  }
}

.gm-cate-page-next {
  background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
  background-size: cover;
  width: 50px;
  height: 50px;
  z-index: 1;
  border-radius: 8px;
  right: 15px;

  &:after {
    display: none;
  }

  &:hover {
    background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
    background-size: cover;
    // opacity:.6 !important;
  }
}

.ho-dds {
  font-size: 14px;
  padding: 14px 17px;
  background: #171717;
  border-radius: 16px;
  min-height:430px;
  li {
    line-height: 22px;
    height: 22px;
    margin-bottom: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &.no-data{
      background:#1D1D1F;
    }
    span {
      margin-right: 15px;
      display: inline-block;
      font-size: 14px;
    }

    a:hover {
      color: #11CCB1;
      text-decoration: underline;
      transition: none;
    }
  }

  .rd {
    color: #11CCB1;
  }

  .m-y {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #11CCB1;
  }
}

.hot-row {
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  margin-top: 10px;
  display: flex;
  grid-gap: 20px;
  // height:212px;
  li {
    position: relative;
    width: calc((100% - 80px) / 5);
    // height:233px;
    height:201px;
    &.no-data{
      background:#1D1D1F;
      border-radius:16px;
    }
    &:hover {
      .img-box {
        >img {
          transform: scale(1.08);
        }
      }
    }

    .is-adv {
      position: absolute;
      right: 0px;
      top: 0px;
      font-size: 12px;
      color: #848393;
      background: #1D1D1F;
      width: 34px;
      text-align: center;
      line-height: 18px;
      border-radius: 4px;
      display: none;
    }

    .desc-tit {
      margin-bottom: 10px;
      display: inline-block;
      line-height:22px;
      display: none;
    }

    // margin-right:20px;
    .img-box {
      // width:311px;
      width: 100%;
      height:201px;
      // height:169px;
      border-radius: 16px;
      overflow: hidden;
      display: inline-block;
      position: relative;
      border: 2px solid transparent;

      >img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .left-icos {
        position: absolute;
        left: 10px;
        top: 10px;
        display: flex;
        align-items: center;
      }
    }
    @keyframes borderMove {
        0% {
            background-position: 0% 0;
        }
        100% {
            background-position: -300% 0;
        }
    }
    // &:not(.no-data):nth-child(1),&:not(.no-data):nth-child(2){
    //   .img-box{
    //     padding:2px;
    //     background: linear-gradient(90deg, #ff1553, #ff1553, #d60094, #d60094, #ff1553, #ff1553);
    //     background-size: 300% 100%;
    //     // animation: borderMove 3s linear infinite;
    //     img{
    //       border-radius:14px;
    //     }
    //     &:before{
    //       content: '';
    //       position: absolute;
    //       top: -2px;
    //       left: -2px;
    //       right: -2px;
    //       bottom: -2px;
    //       background: inherit;
    //       border-radius: 16px;
    //       filter: blur(8px);
    //       opacity: 0.6;
    //       z-index: -1;
    //       // animation: borderMove 3s linear infinite;
    //     }
    //   }
    // }
  }
}

.bal-tit {
  font-size: 26px;
  color: #fff;
  margin-bottom: 10px;
  // height: 37px;
  line-height: 37px;
  width: 100%;

  a {
    // display:flex;
    // align-items: center;
    // height:100%;
    // padding-right:20px;
  }

  .has-arrow {
    display: flex;
    align-items: center;

    &:after {
      content: '';
      width: 26px;
      height: 26px;
      background: url('../../assets/pro/more_arrow.svg') no-repeat;
      // margin-left:20px;
      background-position: center;
      display: inline-block;
      margin-left: 4px;
      margin-top: 4px;
    }
  }

  .no-bg {
    background: none;
    cursor: default;
  }

  .random-change {
    font-size: 12px;
    color: #848393;
    cursor: pointer;
    line-height: 24px;
    padding-left: 26px;
    padding-right: 5px;
    text-align: center;
    border-radius: 4px;
    user-select: none;
    background-color: #1D1D1F;
    background-image: url('../../assets/pro/random_btn.svg');
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 8% center;
    &:active{
      opacity:.8;
    }
  }
}

.center-b-area {
  margin-top: 60px;
  display: flex;
  align-items: flex-start;

  .mt41 {
    margin-top: 41px;
  }

  .flex-bal {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .b-a-left {
    display: flex;
    flex-wrap: wrap;
    // width: calc(100% - 395px - 21px);
    width:100%;
    transition: .1s all linear;

    .ba-datas {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      grid-gap: 20px;

      .bdl-data-item {
        width: calc((100% - 60px) / 4);
        min-height:150px;
        // height: 274px;
        border-radius: 16px;
        overflow: hidden;
        // margin-right:20px;
        // margin-bottom:20px;
        position: relative;
        border: 2px solid transparent;
        &.no-data{
          background:#1D1D1F;
        }
        &:hover {
          >img {
            transform: scale(1.08);
          }

          .hid-el {
            opacity: 1;
          }
        }

        .left-icos {
          position: absolute;
          left: 10px;
          top: 10px;
          display: flex;
          align-items: center;

          img {
            &:first-child {
              margin-right: 10px;
            }
          }
        }

        .right-icos {
          position: absolute;
          right: 10px;
          top: 10px;
          display: flex;
          align-items: center;
          transition: .2s all linear;

          img {
            &:first-child {
              // margin-right:10px;
            }
          }
        }

        >img {
          // width: 100%;
          // height: 100%;
          // object-fit: cover;
        }

        .basic-u-info {
          position: absolute;
          bottom: 11px;
          left: 13px;
          display: flex;
          align-items: center;
          right: 12px;
          justify-content: space-between;
          z-index: 1;

          .user {
            display: flex;
            align-items: center;

            >img {
              height: 26px;
              width: 26px;
              border-radius: 26px;
              object-fit: cover;
              margin-right: 9px;
            }

            .name {
              color: #fff;
              font-size: 14px;
              font-weight: 500;
            }
          }

          .znum {
            font-size: 12px;
            background: url('../../assets/pro/icon_like2.svg') no-repeat;
            padding-left: 26px;
            background-position: left center;
            color: #fff;
            line-height: 20px;
          }

          .snum {
            font-size: 12px;
            background: url('../../assets/pro/yuedu_icon.svg') no-repeat;
            padding-left: 26px;
            background-position: left center;
            color: #fff;
            line-height: 20px;
          }
        }

        .con-mask {
          height: 129px;
          position: absolute;
          bottom: 0px;
          left: 0px;
          right: 0px;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
          cursor: default;
        }

        &:nth-child(3n) {
          // margin-right:0px;
        }

        &:nth-child(7),
        &:nth-child(8),
        &:nth-child(9) {
          // margin-bottom:0px;
        }

        .hid-el {
          opacity: 0;
        }
      }
    }
  }

  .b-a-right {
    // min-width:430px;
    margin-left: 21px;
    width: 395px;
    transition: .1s all linear;

    ul {
      font-size: 16px;
      color: #fff;

      li {
        &:last-child {
          margin-bottom: 0px !important;
        }
      }
    }
  }
}

.all-games {
  margin-top: 30px;

  .data-wrap {
    .bdl-data-item {
      animation: opacity .5s ease-in;
      .mimg-box{
          border-radius:12px;
          overflow: hidden;
          // height:269px;
          // img{
          //     height:100%;
          //     width:100%;object-fit:cover;
          // }
      }
      &:nth-child(7n) {
        // margin-right:0px;
      }

      .hid-el {
        // display: none;
        opacity: 0;
      }

      &:hover {
        border: 2px solid #11CCB1;

        // width:214px;height:214px;
        .mimg-box>img {
          transform: scale(1.08);
        }

        .hid-el {
          // display: inline-block;
          opacity: 1;
        }
      }
    }
    &.big{
      .bdl-data-item{
        width:calc((100% - 80px) / 5);
        height: auto;
        min-height:250px;
      }
    }
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

.yx-cate {
  margin-top: 60px;
}

.zj-ba-data {
  .data-wrap {
    display: flex;

    .bdl-data-item {
      width: 216px !important;
      height: 326px;
      min-width: 216px;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      // margin-right:20px;
      // margin-bottom:20px;
      background: #1D1D1F;

      &:last-child {
        margin-right: 0px;
      }

      .hid-el {
        // display: none;
        opacity: 0;
      }

      &:hover {
        border: 2px solid #11CCB1;

        // width:214px;height:214px;
        >img {
          transform: scale(1.08);
        }

        .hid-el {
          // display: inline-block;
          opacity: 1;
        }
      }


      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .left-icos {
        position: absolute;
        left: 10px;
        top: 10px;
        display: flex;
        align-items: center;

        img {
          &:first-child {
            margin-right: 10px;
          }
        }
      }

      .right-icos {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        align-items: center;
        transition: .2s all linear;

        img {
          &:first-child {
            // margin-right:10px;
          }
        }
      }

      .basic-info {
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 1;
        right:10px;
        .title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 3px;
        }

        .bot-desc {
          font-size: 12px;
          color: #fff;
          display: flex;
          white-space: nowrap;
          align-items: center;
          width:100%;
          .pnum {
            background: url('../../assets/pro/icon_pic.svg') no-repeat;
            background-position: left center;
            padding-left: 16px;
          }
          .uname {
            margin-left: 32px;
            background: url('../../assets/pro/icon_user.svg') no-repeat;
            background-position: left center;
            padding-left: 16px;

            
            display: flex;
            align-items: center;
            width:100%;
            .name-text{
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis
            }
          }
        }
      }

      .con-mask {
        height: 129px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }
    }
  }

  .yx-cates {
    display: flex;

    padding-right: 180px;

    .yx-c-item {
      min-width: 216px;
      height: 98px;
      // background:#1D1D1F;
      width: auto !important;
      margin-right: 20px;
      border-radius: 16px;
      position: relative;
      border: 2px solid transparent;
      transition: .1s all linear;

      &:hover {
        opacity: 1;
        border-color:#11CCB1;
      }

      >a {
        display: inline-block;
        width: 100%;
        height: 100%;
      }

      &:nth-child(1n):not(.no-data) {
        background: rgba(88, 61, 68, 0.4);
      }
      &.no-data{
        background:#1D1D1F;
      }

      .txt {
        color: #fff;
        font-size: 16px;
        position: absolute;
        bottom: 13px;
        line-height: 22px;
        left: 16px;
      }
    }
  }
  &.no-loaded-rcgms{
    .data-wrap{
      .bdl-data-item{
        margin-right:20px;
      }
    }
  }
}

.d-page {
  text-align: center;

  .pgbtn {
    width: 74px;
    height: 74px;
    display: inline-block;
    background: url('../../assets/pro/page_normal_icon.svg') no-repeat;

    &:hover {
      background: url('../../assets/pro/dpage_hover_icon.svg') no-repeat;
    }
  }
}

.ald-ba-data {
  .data-wrap {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;

    .bdl-data-item {
      // width:216px;
      width: calc((100% - 120px) / 7);
      height: 216px;
      border-radius: 16px;
      overflow: hidden;
      // margin-right:20px;
      // margin-bottom:20px;
      // transition:.2s all linear;
      border:2px solid transparent;
      animation: opacity .2s linear;
      position: relative;
      &.no-data{
        background:#1D1D1F;
      }
      .left-icos {
        position: absolute;
        left: 10px;
        top: 10px;
        display: flex;
        align-items: center;

        img {
          &:first-child {
            margin-right: 10px;
          }
        }
      }

      .right-icos {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        align-items: center;
        transition: .2s all linear;

        img {
          &:first-child {
            // margin-right:10px;
          }
        }
      }

      >img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .basic-u-info {
        position: absolute;
        bottom: 11px;
        left: 13px;
        display: flex;
        align-items: center;
        right: 12px;
        justify-content: space-between;
        z-index: 1;

        .user {
          display: flex;
          align-items: center;

          img {
            height: 26px;
            width: 26px;
            border-radius: 26px;
            object-fit: cover;
            margin-right: 9px;
          }

          .name {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
          }
        }

        .znum {
          font-size: 12px;
          background: url('../../assets/pro/dianzanicon.svg') no-repeat;
          padding-left: 26px;
          color: #fff;
        }
      }

      .con-mask {
        height: 129px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }

      .basic-info {
        // position: absolute;
        bottom: 10px;
        padding:9px 10px 10px 10px;
        left: 10px;
        z-index: 1;
        right: 10px;

        .title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 3px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .bot-desc {
          font-size: 12px;
          color: #969696;
          display: flex;
          align-items: center;
          margin-top:8px;
          white-space: nowrap;
          .pnum {
            background: url('../../assets/pro/icon_pic.svg') no-repeat;
            background-position: left center;
            padding-left: 16px;
          }

          .u-img{
              width:20px;
              height:20px;
              max-width:20px;
              border-radius:20px;
              object-fit: cover;
              margin-right:8px;
          }
          .znum {
              font-size: 12px;
              background: url('../../assets/pro/icon_like2.svg') no-repeat;
              padding-left: 26px;
              background-position: left center;
              // color: #fff;
              line-height: 20px;
          }
          .vnum {
              font-size: 12px;
              background: url('../../assets/pro/l_vnum.svg') no-repeat;
              padding-left: 20px;
              background-position: left center;
              // color: #fff;
              line-height: 20px;
              margin-left:20px;
          }
        
                    
        .jnum{
            font-size: 12px;
            background: url('../../assets/pro/z_number.svg') no-repeat;
            padding-left: 20px;
            background-position: left center;
            background-size:18px;
            // color: #fff;
            line-height: 20px;
            margin-left:18px;
            color:#11CCB1;
        }
          .uname {
            // margin-left: 32px;
            // background: url('../../assets/pro/icon_user.svg') no-repeat;
            // background-position: left center;
            // padding-left: 16px;
            display: flex;
            align-items: center;
            width: 100%;

            .name-text {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}

.dx-ba-data {
  margin-top: 26px;
}

.zj-add {
  margin-top: 60px;
}

.ptop-cate {
  position:relative;
  top: 0px;
  z-index: 12;
  padding-bottom:20px;
  &.no-loaded-cat{
    .swiper-slide{
      margin-right:20px;
    }
  }
}
</style>
